<template>
    <el-card>
        <el-form :model="form" ref="formRef" :inline="true" style="text-align:left"
            @keyup.enter.native="submitForm(formRef)">
            <el-form-item  prop="keywords" >
                <el-input v-model="form.keywords" placeholder="关键字搜索" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(formRef)">搜索</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </el-form-item>
        </el-form>
        <div>最近更新日期：{{fileTime}} 版本号：{{version}}</div>
        <XTable 
        :table-data="showData" 
        :columns="tableColumn" 
        :options="options" 
        @selection-change="handleSelection"
        @pagination-change="paginationChange"
            @command="handleAction">
            <template #championImg="{ row }">
                <div class="championImg">
                    <img :src="ChampionImg + row.alias + '.png'" style="width:100%">
                </div>
            </template>
        </XTable>

    </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed, toRefs, watch } from 'vue';
import { useStore } from '@/store'
import { getHeroList, ChampionImg } from '@/api/user'
import type { FormInstance } from 'element-plus'
import XTable from '@/components/Table/index.vue'
import { tableColumn } from './index.data'

const store = useStore()

const allData = ref([]);
const fileTime = ref();
const version = ref();
const state = reactive({
    options: {
        showPagination: true,
        paginationConfig: {
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    }

})

const showData = ref([])
onMounted(async () => {
    let data = await getHeroList();
    allData.value = data?.hero;
    fileTime.value = data?.fileTime;
    version.value = data?.version;
    state.options.paginationConfig.total = data?.hero.length;
    loadData()
})
const paginationChange = (currentPage:number,pageSize:number)=>{
    state.options.paginationConfig.currentPage = currentPage,
    state.options.paginationConfig.pageSize = pageSize;
    loadData()
}

const loadData = ()=>{
    let currentPage = state.options.paginationConfig.currentPage;
    let pageSize = state.options.paginationConfig.pageSize;
    let filterData = allData.value.filter((item, index) =>
        item.keywords.includes(filterParams.keywords) 
    )
    state.options.paginationConfig.total = filterData.length;
    let returnData = filterData.filter((item, index) => index >= (currentPage - 1) * pageSize && index < currentPage * pageSize)
    showData.value = returnData;
}

const form: { [key: string]: string } = reactive({
    keywords:''
})
const filterParams: { [key: string]: string } = reactive({
    keywords:''
})

const formRef = ref<FormInstance>()

const submitForm = (formEl: FormInstance | undefined) => {

    if (!formEl) return
    state.options.paginationConfig.currentPage = 1;
    formEl.validate((valid) => {
        if (valid) {
            state.options.paginationConfig.currentPage = 1
            for (const key in form) {
                console.log(key)
                if (Object.prototype.hasOwnProperty.call(form, key)) {
                    const element = form[key];
                    filterParams[key] = element;
                }
            }
            loadData()
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    state.options.paginationConfig.currentPage = 1;
    formEl.resetFields()
    state.options.paginationConfig.currentPage = 1
    for (const key in form) {
        console.log(key)
        if (Object.prototype.hasOwnProperty.call(form, key)) {
            const element = form[key];
            filterParams[key] = element;
        }
    }
    loadData()
}

const handleSelection = (val:any) => {
  console.log('父组件接收的多选数据', val)
}
const handleAction = (command:Table.command, row:any) => {
  console.log(command,row);
}

const { options } = toRefs(state);

</script>

<style scoped>
.demo-pagination-block {
    margin-bottom: 16px;
}

.championImg {
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}
</style>